<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <link rel="stylesheet" href="/js/theme/default/style.css" type="text/css" />
    <script src="/js/OpenLayers.js"></script>
    <script type="text/javascript" src="/js/heatmap.js"></script>
    <script type="text/javascript" src="/js/heatmap-openlayers.js"></script>
    <script type="text/javascript">
        function load(){
		var testData = {
			max: 100,
			data: [
				{"lat":4,"lng":52,"count":100}
			]
		};

            var mapOptions = {
		
		};

            	var map = new OpenLayers.Map( 'map', mapOptions );
	    	
		var osm = new OpenLayers.Layer.OSM();
 
		var wms = new OpenLayers.Layer.WMS(
			"WijkenBuurten2009",
			"http://geoservices.cbs.nl/arcgis/services/WijkenBuurten2009/MapServer/WMSServer",
		{
		layers: '0',
		transparent: "true",
		format: "image/png",
		style: 'BEV_DICHTH',
		crs:'epsg:4326',
		version: '1.3.0'},
		{isBaselayer: false});

		heatmap = new OpenLayers.Layer.Heatmap( 
			"Heatmap Layer", map, osm, 
			{visible: true, radius:10}, {isBaseLayer: false, opacity: 0.3});



		map.addLayers([osm,heatmap]);
	    	//map.addLayer(osm);

            	map.addControl( new OpenLayers.Control.MousePosition() );
	    	map.addControl(new OpenLayers.Control.Scale());
            	map.addControl(new OpenLayers.Control.LayerSwitcher());

            	map.setCenter(
    		new OpenLayers.LonLat(4.864197,52.353796).transform(
                new OpenLayers.Projection("EPSG:4326"),
                    map.getProjectionObject()
                ), 9
            	);  
		
		heatmap.setDataSet(testData);
	
        }
        

    </script>
  </head>
  <body onload="load()">
    <h1 id="title">Heatmap Layer test</h1>

    <div id="tags">
    </div>
    <p id="shortdesc">
        testje met heatmap.js
    </p>

    <div id="map" class="smallmap"></div>

  </body>
</html>




